<template>
	<view class="order-operate-component">
		<view class="order-operate-content">
			<view class="order-operate-body">
				<view
					v-if="canCancel"
					class="operate-more"
					@click="open"
				>
					<text>更多</text>
				</view>
				<view class="operate-button">
					<button
						class="button"
						hover-class="none"
						:open-type="openType"
						:hover-stop-propagation="true"
						@click="service"
					>
						<text>联系客服</text>
					</button>
					<view
						v-if="orderInfo.orderStatusNo === '6'"
						class="button"
						@click="$emit('again')"
					>
						<text>再下一单</text>
					</view>
					<view
						v-if="orderInfo.orderStatusNo === '7'"
						class="button"
						@click="$emit('revaluation')"
					>
						<text>重新估价</text>
					</view>
					<view
						v-if="orderInfo.orderStatusNo === '4'"
						class="button"
						@click="confirm"
					>
						<text>确认回收</text>
					</view>
				</view>
			</view>
		</view>
		<uv-popup
			ref="cancelPopup"
			mode="bottom"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		  @close="close"
		>
			<view class="cancel-content">
				<view
					class="cancel-button"
					@click="cancel"
				>
					<text>取消订单</text>
				</view>
				<view
					class="close-button"
					@click="close"
				>
					<image class="icon-close" src="https://s1.huishoubao.com/static/wechatMini/icon_close.png"></image>
				</view>
			</view>
		</uv-popup>
		<uv-modal
			ref="cancelModal"
			align="center"
			title="确认取消？"
			content="是该订单已为您保价7天，取消后重新下单有可能跌价"
			confirmText="继续回收"
			cancelText="取消订单"
			confirmColor="#ee0a24"
			:showCancelButton="true"
			@cancel="cancelRecycle"
		/>
		<uv-modal
			ref="agreeModal"
			align="center"
			title="温馨提示"
			content="是否确认回收？"
			:showCancelButton="true"
			@confirm="agreeRecycle"
		/>
	</view>
</template>

<script>
export default {
	props: {
		orderInfo: Object
	},
	computed: {
		canCancel () {
			return this.orderInfo.canCancel === '1' || this.orderInfo.canRefund === '1'
		}
	},
	data () {
		return {
			// #ifdef MP-WEIXIN
			openType: 'contact'
			// #endif
			// #ifndef MP-WEIXIN
			openType: ''
			// #endif
		}
	},
	methods: {
		open () {
			this.$refs.cancelPopup.open()
		},
		close () {
			this.$refs.cancelPopup.close()
		},
		cancel () {
			this.close()
			this.$refs.cancelModal.open()
		},
		confirm () {
			this.$refs.agreeModal.open()
		},
		service () {
			if (this.openType) return
			this.$emit('service')
		},
		cancelRecycle () {
			this.$emit('cancel')
		},
		agreeRecycle () {
			this.$emit('agree')
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>